<template>
  <ContentWrap>
    <!-- 第一部分：试卷属性设置 -->
    <el-card class="paper-settings mb-20">
      <template #header>
        <div class="card-header">
          <span class="title">试卷属性设置</span>
        </div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="试卷名称" prop="paperName">
              <el-input v-model="formData.paperName" placeholder="请输入试卷名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题目分类" prop="categoryIds">
              <el-tree-select
                v-model="formData.categoryIds"
                :data="categoryOptions"
                check-strictly
                multiple
                placeholder="请选择题目分类"
                show-checkbox
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item prop="questionOrder">
          <template #label>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div style="padding: 5px">
                  <div>固定：所有考生看到的题目顺序相同</div>
                  <div>随机：每个考生看到的题目顺序随机打乱</div>
                </div>
              </template>
              <span>题目顺序</span>
            </el-tooltip>
          </template>
          <el-radio-group v-model="formData.questionOrder">
            <el-radio :value="false">固定</el-radio>
            <el-radio :value="true">随机</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="answerOrder">
          <template #label>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div style="padding: 5px">
                  <div>固定：所有考生看到的答案顺序相同</div>
                  <div>随机：每个考生看到的答案顺序随机打乱</div>
                </div>
              </template>
              <span>答案顺序</span>
            </el-tooltip>
          </template>
          <el-radio-group v-model="formData.answerOrder">
            <el-radio :value="false">固定</el-radio>
            <el-radio :value="true">随机</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="题库随机" prop="bankOrder">
          <template #label>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div style="padding: 5px">
                  <div>否：所有考生看到的题目相同</div>
                  <div>是：每个考生看到的题目都是从题库随机的，每个人题目都不一样</div>
                </div>
              </template>
              <span>题库随机</span>
            </el-tooltip>
          </template>
          <el-radio-group v-model="formData.bankOrder">
            <el-radio :value="false">否</el-radio>
            <el-radio :value="true">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="试卷题目" prop="questions">
          <div class="questions-wrapper">
            <el-button class="ml-2" type="primary" @click="drawerVisible = true">
              {{ formData.bankOrder ? '选择题库' : '选择题目' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 第二部分：试题设置 -->
    <el-card class="question-settings">
      <template #header>
        <div class="card-header">
          <span class="title">试题设置</span>
        </div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        <!-- 其他题目相关的表单项 -->
        <el-form-item :label="formData.bankOrder ? '随机题库' : '固定题库'">
          <span class="list-title"></span>
        </el-form-item>
        <el-form-item class="examlist">
          <!-- 添加题目列表表格 -->
          <el-table
            v-if="!formData.bankOrder"
            ref="questionTableRef"
            :data="formData.questions"
            :default-sort="{ prop: paperStore.sortState.prop, order: paperStore.sortState.order }"
            border
            style="width: 90%"
            @sort-change="handleSortChange"
          >
            <el-table-column align="center" label="序号" type="index" width="60" />
            <el-table-column
              align="left"
              label="题目"
              min-width="200"
              prop="content"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span style="padding-left: 10px">{{ scope.row.content }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="题型" prop="type" sortable="custom" width="120">
              <template #default="scope">
                {{ getQuestionTypeLabel(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="题目分类"
              prop="questionType"
              sortable="custom"
              width="150"
            >
              <template #default="scope">
                {{ scope.row.questionType }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="题目难度"
              prop="difficulty"
              sortable="custom"
              width="120"
            >
              <template #default="scope">
                {{ getDifficultyLabel(scope.row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column align="center" width="200">
              <template #header>
                <div class="score-header">
                  <span>分值设置</span>
                  <el-tooltip class="box-item" content="批量设置分值" effect="dark" placement="top">
                    <el-button link type="primary" @click="openScoreDialog">
                      <el-icon><Setting /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </template>
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.score"
                  :min="0"
                  :precision="1"
                  :step="0.5"
                  placeholder="请输入分值"
                  @change="(val) => handleScoreChange(scope.row, val)"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="120">
              <template #default="scope">
                <el-button link type="danger" @click="handleRemoveQuestion(scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 合并为一个表格 -->
          <el-table
            v-if="formData.bankOrder && randomBanks.length > 0"
            :data="mergedTableData"
            border
            style="width: 90%"
          >
            <!-- 第一列 -->
            <el-table-column label="" width="180">
              <template #default="scope">
                <!-- 题库名称 -->
                <template v-if="scope.row.type === 'bank'">
                  {{ scope.row.name }}
                </template>
                <!-- 设置项标签 -->
                <template v-else>
                  {{ scope.row.label }}
                </template>
              </template>
            </el-table-column>

            <!-- 题型列 -->
            <el-table-column
              v-for="type in questionTypes"
              :key="type.key"
              :label="type.label"
              align="center"
            >
              <template #default="scope">
                <!-- 题库数量 -->
                <template v-if="scope.row.type === 'bank'">
                  共{{ scope.row[type.key] }}题
                </template>
                <!-- 抽取题目数 -->
                <template v-else-if="scope.row.type === 'count'">
                  <el-input-number
                    v-model="randomSettings.counts[type.key]"
                    :min="0"
                    :precision="0"
                    :step="1"
                    controls-position="right"
                    @change="calculateTotalScore"
                  />
                </template>
                <!-- 批量设置分值 -->
                <template v-else-if="scope.row.type === 'score'">
                  <el-input-number
                    v-model="randomSettings.scores[type.key]"
                    :min="0"
                    :precision="1"
                    :step="0.5"
                    controls-position="right"
                    @change="calculateTotalScore"
                  />
                </template>
                <!-- 特殊分值设置（合并漏选和每空设置） -->
                <template v-else-if="scope.row.type === 'partial'">
                  <template v-if="type.key === 'multiple'">
                    <div class="special-score-setting">
                      <span class="setting-label">漏选得分：</span>
                      <el-input-number
                        v-model="randomSettings.partialScores.multiple"
                        :min="0"
                        :max="randomSettings.scores.multiple"
                        :precision="1"
                        :step="0.5"
                        controls-position="right"
                        @change="handlePartialScoreChange('multiple')"
                      />
                    </div>
                  </template>
                  <template v-else-if="type.key === 'blank'">
                    <div class="special-score-setting">
                      <span class="setting-label">每空得分：</span>
                      <el-input-number
                        v-model="randomSettings.partialScores.blank"
                        :min="0"
                        :max="randomSettings.scores.blank"
                        :precision="1"
                        :step="0.5"
                        controls-position="right"
                        @change="handlePartialScoreChange('blank')"
                      />
                    </div>
                  </template>
                  <template v-else> / </template>
                </template>
                <!-- 合计题目 -->
                <template v-else-if="scope.row.type === 'total'">
                  {{ randomSettings.counts[type.key] || 0 }}题
                </template>
                <!-- 合计分数 -->
                <template v-else-if="scope.row.type === 'totalScore'">
                  {{
                    (
                      (randomSettings.counts[type.key] || 0) *
                      (randomSettings.scores[type.key] || 0)
                    ).toFixed(1)
                  }}分
                </template>
              </template>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column align="center" label="操作" width="120">
              <template #default="scope">
                <template v-if="scope.row.type === 'bank'">
                  <el-button link type="danger" @click="handleRemoveBank(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item class="examlist"> </el-form-item>

        <!-- 总分显示，移到新的 form-item 中 -->
        <el-form-item v-if="formData.questions && formData.questions.length > 0">
          <div class="total-score">总分：{{ totalScore }} 分</div>
        </el-form-item>

        <el-form-item prop="passScore">
          <template #label>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div style="padding: 5px">
                  <div>默认为总分的60%</div>
                </div>
              </template>
              <span>及格线</span>
            </el-tooltip>
          </template>
          <el-input-number
            v-model="formData.passScore"
            :max="totalScore"
            :min="0"
            :precision="1"
            :step="0.5"
          />
          <span class="ml-2">分</span>
        </el-form-item>

        <el-form-item label="考试时长" prop="duration">
          <el-input-number v-model="formData.duration" :min="1" :precision="0" :step="1" />
          <span class="ml-2">分钟</span>
        </el-form-item>

        <!-- 底部按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-drawer v-model="drawerVisible" :destroy-on-close="false" size="70%" title="选择试卷题目">
      <div>
        <Question
          ref="questionRef"
          :show-table-checkbox="!formData.bankOrder"
          :show-tree-checkbox="formData.bankOrder"
          @selection-change="handleSelectionChange"
        />
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawerVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSelectQuestions">确定</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 添加分值设置弹窗 -->
    <el-dialog v-model="scoreDialogVisible" width="700px" :close-on-click-modal="false">
      <template #header>
        <div class="dialog-title">
          <span>分值设置</span>
          <span class="dialog-total-score">总分：{{ dialogTotalScore }}分</span>
        </div>
      </template>
      <div class="score-settings">
        <div v-for="(count, type) in questionTypeCounts" :key="type" class="score-setting-item">
          <div class="score-label">
            <span class="type-name">【{{ getQuestionTypeLabel(type) }}】</span>
            <span class="count-info">数量: {{ count }}</span>
          </div>
          <div class="score-info">
            <span class="score-input">
              <span class="label">每题分值：</span>
              <el-input-number
                :model-value="fixedQuestions.find((q) => q.type === type)?.score || 0"
                :min="fixedQuestions.find((q) => q.type === type)?.partialScore || 0"
                :precision="1"
                :step="0.5"
                @update:model-value="(val) => paperStore.updateFixedQuestionScore(type, val)"
              />
              <span class="unit">分</span>
            </span>
            <!-- 填空题特殊处理 -->
            <template v-if="type === 'blank'">
              <span class="score-input">
                <span class="label">每空得分：</span>
                <el-input-number
                  :max="fixedQuestions.find((q) => q.type === type)?.score || 0"
                  :model-value="fixedQuestions.find((q) => q.type === type)?.partialScore || 0"
                  :min="0"
                  :precision="1"
                  :step="0.5"
                  @update:model-value="
                    (val) => paperStore.updateFixedQuestionPartialScore(type, val)
                  "
                />
                <span class="unit">分</span>
              </span>
            </template>
            <!-- 多选题特殊处理 -->
            <template v-if="type === 'multiple'">
              <span class="score-input">
                <span class="label">漏选得分：</span>
                <el-input-number
                  :max="fixedQuestions.find((q) => q.type === type)?.score || 0"
                  :model-value="fixedQuestions.find((q) => q.type === type)?.partialScore || 0"
                  :min="0"
                  :precision="1"
                  :step="0.5"
                  @update:model-value="
                    (val) => paperStore.updateFixedQuestionPartialScore(type, val)
                  "
                />
                <span class="unit">分</span>
              </span>
            </template>
            <span class="total"
              >共{{ (fixedQuestions.find((q) => q.type === type)?.score || 0) * count }}分</span
            >
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="scoreDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleApplyScores">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </ContentWrap>
</template>

<script setup>
import { computed, onUnmounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting } from '@element-plus/icons-vue'
import Question from '../../../material/question/index.vue'
import { examPaperStore } from '@/store/modules/exam/paper'
import { storeToRefs } from 'pinia'

// 表单数据
const formData = reactive({
  paperName: '', // 试卷名称
  questionOrder: false, // 题目顺序：固定/随机
  answerOrder: false, // 答案顺序：固定/随机
  bankOrder: false, // 题库随机：否/是
  categoryIds: [], // 题目分类
  passScore: 60, // 及格线
  duration: 60, // 考试时长（分钟）
  questions: [] // 修改为数组类型
})

// 表单校验规则
const rules = {
  paperName: [
    { required: true, message: '请输入试卷名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  passScore: [{ required: true, message: '请设置及格线', trigger: 'blur' }],
  duration: [{ required: true, message: '请设置考试时长', trigger: 'blur' }]
}

// 模拟题目分类数据，实际使用时需要从后端获取
const categoryOptions = ref([
  {
    value: '1',
    label: '分类1',
    children: [
      {
        value: '1-1',
        label: '子分类1-1'
      }
    ]
  },
  {
    value: '2',
    label: '分类2'
  }
])

const formRef = ref(null)

// 抽屉显示状态
const drawerVisible = ref(false)

const questionRef = ref(null)

// 获取 store 中的数据，使用新的命名
const paperStore = examPaperStore()
const { fixedQuestions, randomBanks, randomSettings, getSortedQuestions } = storeToRefs(paperStore)

// 添加表格引用
const questionTableRef = ref(null)

// 定义题型配置
const QUESTION_TYPE_CONFIG = {
  single: '单选题',
  multiple: '多选题',
  judge: '判断题',
  short: '简答题',
  blank: '填空题'
}

// 定义题目分类配置
const QUESTION_CATEGORY_CONFIG = {
  math: '数学',
  english: '英语',
  chinese: '语文',
  physics: '物理',
  chemistry: '化学'
}

// 定义难度等级配置
const DIFFICULTY_CONFIG = {
  1: '简单',
  2: '中等',
  3: '困难'
}

// 获取难度标签
const getDifficultyLabel = (difficulty) => {
  return DIFFICULTY_CONFIG[difficulty] || '未知难度'
}

// 获取题型标签
const getQuestionTypeLabel = (type) => {
  return QUESTION_TYPE_CONFIG[type] || '未知题型'
}

// 计算总分
const totalScore = ref(0)
const calculateTotalScore = () => {
  if (!formData.questions || !Array.isArray(formData.questions)) {
    totalScore.value = 0
    return
  }
  totalScore.value = Number(
    formData.questions
      .reduce((sum, question) => {
        return sum + (question.score || 0)
      }, 0)
      .toFixed(1)
  )
}

// 修改处理排序变化的方法
const handleSortChange = ({ prop, order }) => {
  try {
    // 更新 store 中的排序状态
    paperStore.updateSortState(prop, order)

    // 使用排序后的题目更新表格数据
    const sorted = getSortedQuestions.value
    if (!Array.isArray(sorted)) {
      console.warn('排序结果不是数组')
      return
    }

    // 更新表格数据，保持分值不变
    formData.questions = sorted.map((question) => ({
      ...question,
      score: formData.questions.find((q) => q.id === question.id)?.score || question.score || 0,
      partialScore:
        formData.questions.find((q) => q.id === question.id)?.partialScore || question.partialScore
    }))
  } catch (error) {
    console.error('排序处理出错：', error)
  }
}

// 修改选择题目的处理方法
const handleSelectionChange = (selection) => {
  // 更新 store 中的数据
  paperStore.setFixedQuestions(selection)

  // 使用排序后的数据更新表格
  const sorted = getSortedQuestions.value
  if (Array.isArray(sorted) && sorted.length > 0) {
    // 更新表格数据，保持分值不变
    formData.questions = sorted.map((question) => ({
      ...question,
      score: formData.questions.find((q) => q.id === question.id)?.score || question.score || 0,
      partialScore:
        formData.questions.find((q) => q.id === question.id)?.partialScore || question.partialScore
    }))
  } else {
    formData.questions = selection.map((item) => ({
      id: item.id,
      content: item.content,
      type: item.type,
      questionType: item.questionType,
      difficulty: item.difficulty,
      score: item.score || 0,
      partialScore: item.partialScore
    }))
  }

  calculateTotalScore()
}

// 修改处理选择题目的方法
const handleSelectQuestions = async () => {
  if (formData.bankOrder) {
    console.log('选择题库')
    // 调用 Question 组件的方法
    if (questionRef.value) {
      await questionRef.value.handleSelectQuestions()
    }
  } else {
    // 将选中的题目添加到表单数据中
    formData.questions = fixedQuestions.value.map((item) => ({
      id: item.id,
      content: item.content,
      type: item.type,
      questionType: item.questionType,
      difficulty: item.difficulty,
      score: 0
    }))
  }
  drawerVisible.value = false
  calculateTotalScore()
}

// 修改删除题目的处理函数
const handleRemoveQuestion = (index) => {
  // 获取要删除的题目
  const removedQuestion = formData.questions[index]

  // 从表格中删除题目
  formData.questions.splice(index, 1)

  // 如果 questionRef 存在，调用其取消选中方法
  if (questionRef.value?.removeSelection) {
    // 取消对应题目的选中状态
    questionRef.value.removeSelection(removedQuestion)

    // 同时更新 store 中的数据
    paperStore.setFixedQuestions(fixedQuestions.value.filter((q) => q.id !== removedQuestion.id))
  }

  // 重新计算总分
  calculateTotalScore()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    // TODO: 调用API保存数据
    console.log('提交的表单数据：', formData)
    ElMessage.success('保存成功')
  } catch (error) {
    console.error('表单验证失败：', error)
  }
}

// 取消
const handleCancel = () => {
  // TODO: 根据实际需求处理取消操作
  formRef.value?.resetFields()
}

// 分值设置弹窗相关
const scoreDialogVisible = ref(false)

// 计算每种题型的数量
const questionTypeCounts = computed(() => {
  if (!formData.questions || !Array.isArray(formData.questions)) return {}
  return formData.questions.reduce((acc, question) => {
    acc[question.type] = (acc[question.type] || 0) + 1
    return acc
  }, {})
})

// 修改应用分值的方法
const handleApplyScores = () => {
  // 检查是否有分值为0的题目，并收集题型信息
  const zeroScoreTypes = fixedQuestions.value
    .filter((question) => !question.score)
    .map((question) => getQuestionTypeLabel(question.type))
    .filter((value, index, self) => self.indexOf(value) === index) // 去重

  if (zeroScoreTypes.length > 0) {
    ElMessage.warning(`${zeroScoreTypes.join('、')}的分值不能为0，请设置分值`)
    return
  }

  // 直接使用 fixedQuestions 中的分值
  formData.questions = fixedQuestions.value.map((question) => ({
    ...question
  }))
  calculateTotalScore()
  scoreDialogVisible.value = false
  ElMessage.success('分值设置成功')
}

// 修改分值设置弹窗的方法
const openScoreDialog = () => {
  if (!fixedQuestions.value.length) {
    ElMessage.warning('请先选择题目')
    return
  }

  // 检查是否有分值为0的题目，如果有则设置默认分值
  const defaultScores = {
    single: 0,
    multiple: 0,
    judge: 0,
    blank: 0,
    short: 0
  }

  fixedQuestions.value.forEach((question) => {
    if (!question.score) {
      paperStore.updateFixedQuestionScore(question.type, defaultScores[question.type] || 0)
    }
  })

  scoreDialogVisible.value = true
}

// 在组件卸载时清空所有数据
onUnmounted(() => {
  paperStore.clearAll() // 使用新的 clearAll 方法替代 clearScoreSettings
})

// 修改题型列表数据，添加计算总数的方法
const questionTypes = computed(() => {
  // 计算每种题型的总数
  const totals = randomBanks.value.reduce((acc, bank) => {
    acc.single = (acc.single || 0) + (bank.single || 0)
    acc.multiple = (acc.multiple || 0) + (bank.multiple || 0)
    acc.judge = (acc.judge || 0) + (bank.judge || 0)
    acc.blank = (acc.blank || 0) + (bank.blank || 0)
    acc.short = (acc.short || 0) + (bank.short || 0)
    return acc
  }, {})

  return [
    { key: 'single', label: `单选题(${totals.single || 0})` },
    { key: 'multiple', label: `多选题(${totals.multiple || 0})` },
    { key: 'judge', label: `判断题(${totals.judge || 0})` },
    { key: 'blank', label: `填空题(${totals.blank || 0})` },
    { key: 'short', label: `问答题(${totals.short || 0})` }
  ]
})

// 修改表格数据的计算属性
const mergedTableData = computed(() => {
  const bankData = randomBanks.value
  const settingsData = [
    { type: 'count', label: '抽取题目数（道）' },
    { type: 'score', label: '批量设置分值（分）' },
    { type: 'partial', label: '特殊分值设置（分）' },
    { type: 'total', label: '合计' },
    { type: 'totalScore', label: '合计（分）' }
  ]

  const bankDataWithType = bankData.map((item) => ({ ...item, type: 'bank' }))
  return [...bankDataWithType, ...settingsData]
})

// 修改删除题库的处理函数
const handleRemoveBank = (index) => {
  paperStore.removeRandomBank(index)
}

// 修改监听逻辑
watch(
  () => [randomSettings.value.scores.multiple, randomSettings.value.scores.blank],
  ([multipleScore, blankScore], oldValues) => {
    if (multipleScore === undefined || blankScore === undefined) return

    if (randomSettings.value.partialScores?.multiple > multipleScore) {
      randomSettings.value.partialScores.multiple = multipleScore
    }

    if (randomSettings.value.partialScores?.blank > blankScore) {
      randomSettings.value.partialScores.blank = blankScore
    }
  },
  { deep: true }
)

// 修改特殊分值变化处理函数
const handlePartialScoreChange = (type) => {
  const score = randomSettings.value.scores?.[type]
  const partialScore = randomSettings.value.partialScores?.[type]

  if (score === undefined || partialScore === undefined) return

  if (partialScore > score) {
    randomSettings.value.partialScores[type] = score
    ElMessage.warning(type === 'multiple' ? '漏选得分不能大于题目分值' : '每空得分不能大于题目分值')
  }
}

// 添加计算属性用于计算对话框中的总分
const dialogTotalScore = computed(() => {
  let total = 0
  Object.entries(questionTypeCounts.value).forEach(([type, count]) => {
    // 计算每种题型的总分
    total += (fixedQuestions.value.find((q) => q.type === type)?.score || 0) * count
  })
  return total.toFixed(1) // 保留一位小数
})

// 监听总分变化，自动计算及格线
watch(totalScore, (newScore) => {
  // 计算及格线为总分的60%，保留一位小数
  formData.passScore = Number((newScore * 0.6).toFixed(1))
})

// 修改处理分数变化的方法
const handleScoreChange = (question, val) => {
  // 更新表格中的分数
  question.score = val

  // 同步更新 store 中的数据
  paperStore.setFixedQuestions(
    fixedQuestions.value.map((q) => (q.id === question.id ? { ...q, score: val } : q))
  )

  // 重新计算总分
  calculateTotalScore()
}
</script>

<style scoped>
.ml-2 {
  margin-left: 8px;
}

.questions-wrapper {
  display: flex;
  align-items: center;
}

.score-item {
  margin: 0;
}

:deep(.score-item .el-form-item__content) {
  margin-left: 31px !important;
}

.total-score {
  margin-left: 1100px;
  font-weight: bold;
  width: 90%;
  color: #d00c0c;
}

:deep(.el-input-number) {
  width: 120px;
}

.examlist {
  margin: 0;
}

:deep(.examlist .el-form-item__content) {
  margin-left: 31px !important;
}

.list-title {
  font-size: 14px;
  color: #606266;
}

.score-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.score-settings {
  padding: 10px;
  max-height: 600px;
  overflow-y: auto;
}

.score-setting-item {
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 8px;
  background-color: var(--el-fill-color-light);
}

.score-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.type-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.count-info {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.score-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.score-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-input .label {
  color: var(--el-text-color-regular);
  font-size: 14px;
  min-width: 70px;
}

.score-input .unit {
  color: var(--el-text-color-regular);
  font-size: 14px;
}

.total {
  color: var(--el-color-primary);
  font-weight: 500;
  font-size: 14px;
  margin-left: auto;
}

.dialog-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dialog-total-score {
  color: var(--el-color-primary);
  font-weight: 500;
  font-size: 15px;
}

.card-header {
  display: flex;
  align-items: center;
  height: 1px;
}

.card-header .title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.paper-settings {
  margin-bottom: 10px;
}

.question-settings {
  /* 如果需要可以添加特定样式 */
}

.settings-labels > div,
.settings-values > div {
  height: 32px;
  line-height: 32px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-values > div {
  border-bottom: 1px solid #ebeef5;
}

.settings-values > div:last-child {
  border-bottom: none;
}

.settings-labels > div {
  text-align: right;
  padding-right: 12px;
  color: #606266;
}

/* 修改表头和行的统一样式 */
:deep(.el-table__header-row),
:deep(.el-table__row) {
  height: 50px;
}

/* 设置表头背景色和文字样式 */
:deep(.el-table__header) th {
  background-color: var(--el-fill-color-light) !important;
  font-weight: 500;
  color: var(--el-text-color-regular);
}

/* 确保表头内容垂直居中 */
:deep(.el-table__header .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 确保内容单元格垂直居中 */
:deep(.el-table .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 对于左对齐的单元格 */
:deep(.el-table .is-left .cell) {
  justify-content: flex-start;
}

/* 对于右对齐的单元格 */
:deep(.el-table .is-right .cell) {
  justify-content: flex-end;
}

.special-score-setting {
  display: flex;
  align-items: center;
  gap: 4px;
}

.special-score-setting .setting-label {
  font-size: 13px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}

:deep(.special-score-setting .el-input-number) {
  width: 80px;
}
</style>
